<template>
  <el-dialog
    class="download-component"
    :title="title"
    :visible.sync="dialogVisible"
    :width="width"
    :before-close="handleClose"
  >
    <div class="content">
      <svg-icon icon-class="download" class="img" />
      <div class="tips">当前文件较大，系统将文件下载到“下载中心”，请去“下载中心”下载</div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" type="success" @click="toDownLoad">去下载中心</el-button>
      <el-button size="mini" type="primary" @click="handleClose">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'DownDialog',
  props: {
    title: {
      type: String,
      default: '信息提示'
    },
    width: {
      type: String,
      default: '450px'
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false
    };
  },
  watch: {
    show: {
      immediate: true,
      handler: function(val) {
        this.dialogVisible = val;
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('handleClose');
    },
    toDownLoad() {
      this.$emit('handleClose');
      this.$router.push('/download-center/index');
    }
  }
};
</script>
<style lang="scss" scoped>
.download-component{
  ::v-deep .el-dialog__footer{
    border-top: 1px solid #ddd;
  }
  ::v-deep .el-dialog__body{
    text-align: center;
  }
  .content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .img{
      font-size: 40px;
    }
    .tips{
      width: 300px;
      text-align: left;
      padding-top: 20px;
      line-height: 1.9;
    }
  }
}
</style>
